<style>
  .site-header, .app-download {
    background: {{app.goodColorOnWhite}};
    color: white !important;
  }

  .app-download {
    background-color: {{app.goodColorOnWhite}} !important;
    color: white !important;
  }

  .site-header-nav-item {
    opacity: 0.7;
  }

  .site-header-nav-item:hover {
    color: white !important;
    border-bottom-color: white !important;
  }

  .site-header-nav-item.bordered {
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
  }

  .site-header-nav-item.active {
    opacity: 1;
    color: white !important;
    border-bottom-color: white !important;
  }

  .container-xl a {
    color: {{app.goodColorOnWhite}} !important;
  }

  .shell-one-liner {
    background: {{app.faintColorOnWhite}};
    color: {{app.goodColorOnWhite}};
    overflow-x: scroll;
  }

  .shell-one-liner::after {
    content: '';
    display: inline-block;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
  }

</style>

<main class="PRIMER-REMOVE-ME px-3 px-md-6">
<div class="py-6 py-md-7 py-lg-8">

  <!-- <nav aria-label="Breadcrumb">
    <ol>
      <li class="breadcrumb-item text-small"><a href="/apps">Apps</a></li>
      <li class="breadcrumb-item breadcrumb-item-selected text-small text-gray" aria-current="page">{{app.name}}</li>
    </ol>
  </nav> -->
  <div class="container-xl media-fluid">
    <div class="clearfix pt-md-6">
      <div class="col-md-3 float-md-left pr-md-5 mb-3 mb-md-0">
        <div class="CircleBadge CircleBadge--large mx-auto box-shadow-large mt-1" style="background-color: #ffffff;"><img class="CircleBadge-icon" src="{{ static-asset 'image' '/app-img/' app.slug '/' app.icon128 }}" alt='{{app.name}}'></div>
      </div>
      <div class="col-md-9 float-md-left pl-md-5 text-center text-md-left">
        <h1 class="f00-light lh-condensed mb-3">
          {{app.name}}
        </h1>
        <h3 class="text-mono text-normal text-gray-light">{{app.description}}</h3>
      </div>
    </div>
    <div class="app-container">
      <main class="left-bar">
        <div class="app-meta">

          {{#if app.website}}
            <div class="app-meta-entry">
              <h5 class="mb-2 text-mono text-normal text-gray-light">{{localized.apps.website}}</h5>
              <a href="{{app.website}}">{{app.website}}</a>
            </div>
          {{/if}}

          {{#if app.repository}}
            <div class="app-meta-entry">
              <h5 class="mb-2 text-mono text-normal text-gray-light">{{localized.apps.repository}}</h5>
              <a href="{{app.repository}}">{{app.repository}}</a>
            </div>
          {{/if}}

          <div class="app-meta-entry">
            <h5 class="mb-2 text-mono text-normal text-gray-light">{{localized.apps.category}}</h5>
            <a class="topic-tag topic-tag-link topic-tag-outline f6" href="/apps?category={{app.categorySlug}}">{{app.category}}</a>
          </div>

          {{#if app.latestRelease}}
            {{#if app.latestRelease.assets}}
              <div class="app-meta-entry app-meta-entry-downloads">
                <h5 class="mb-2 text-mono text-normal text-gray-light">{{localized.apps.downloads}} ({{app.latestRelease.tag_name}})</h5>

                {{#each app.latestRelease.assets}}
                  <a class="app-download {{this.platform}}" href="{{this.browser_download_url}}">{{this.name}}</a>
                {{/each}}

                <a href="{{app.latestRelease.html_url}}" id="view-all-downloads" style="opacity:0.7;font-size:80%;display:none;">View all {{app.latestRelease.assets.length}} files</a>
              </div>
            {{/if}}
          {{/if}}

          {{#if app.homebrewCaskName}}
            <div class="darwin-only app-meta-entry">
              <h5 class="mb-2 text-mono text-normal text-gray-light">Homebrew</h5>
              <span class="shell-one-liner app-download-input">brew install --cask {{app.homebrewCaskName}}</span>
            </div>
          {{/if}}

          {{#if app.snapcraftName}}
            <div class="linux-only app-meta-entry">
              <h5 class="mb-2 text-mono text-normal text-gray-light">Snapcraft</h5>
              <span class="shell-one-liner app-download-input">sudo snap install {{app.snapcraftName}}</span>
            </div>
          {{/if}}

          {{#if app.npmPackageName}}
            <div class="app-meta-entry">
              <h5 class="mb-2 text-mono text-normal text-gray-light">npmjs.com</h5>
              <span class="shell-one-liner app-download-input">npm install -g {{app.npmPackageName}}</span>
            </div>
          {{/if}}

          {{#if app.keywords}}
            <div class="app-meta-entry">
              <h5 class="mb-2 text-mono text-normal text-gray-light">{{localized.apps.keywords}}</h5>
              {{#each app.keywords}}
                <a class="app-keyword" href="/apps?q={{this}}">{{this}}</a>
              {{/each}}
            </div>
          {{/if}}


          {{#if app.license}}
            <div class="app-meta-entry">
              <h5 class="mb-2 text-mono text-normal text-gray-light">{{localized.apps.license}}</h5>
              <span>{{app.license}}</span>
            </div>
          {{/if}}

          {{#if app.latestRelease}}
            <div class="app-meta-entry">
              <h5 class="mb-2 text-mono text-normal text-gray-light">{{localized.apps.latest_release}}</h5>
              <a href="{{app.latestRelease.html_url}}">
                {{app.latestRelease.name}}
                <span class="app-tagname">({{app.latestRelease.tag_name}})</span>
              </a>
            </div>
          {{/if}}

          {{#if app.youtube_video_url}}
            <div class="app-meta-entry app-video-container">
              <iframe src="{{app.youtube_video_url}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
          {{/if}}

        </div>
      </main>
      <div class="app-boxes">
        {{#if app.readmeCleaned}}
          <main id="readme" class="app-box app-readme markdown-body">
            {{{app.readmeCleaned}}}
          </main>
        {{/if}}
        <div class="app-box app-screenshots">
          <div class="active-screenshot">
            <img alt="not_used" />
          </div>
          <div class="all-screenshots">
            {{#each app.screenshots}}
              <div class="app-screenshot-thumb">
                <img alt="{{#if caption}}{{caption}}{{else}}Screenshot{{/if}}" src="{{imageUrl}}" class="{{#if caption}}caption{{/if}}"></img>
                {{#if caption}}
                  <span class="app-screenshot-caption">
                    {{caption}}
                  </span>
                {{/if}}
              </div>
            {{/each}}
          </div>
        </div>
      </div>
    </div>
  </div>

  <p class="text-center something-missing">
    {{localized.apps.something_missing}}
    <a href="https://github.com/electron/electron-apps/tree/master/apps/{{app.slug}}/{{app.slug}}.yml">{{localized.apps.edit_this_app}}</a>
  </p>

</div>
</main>

<script>
  window.app = true
  var $readme = document.getElementById('display-readme')
  if ($readme) {
      $readme.addEventListener('click', function(event) {
      this.classList.add('d-none')
      document.getElementById('readme').classList.remove('d-none')
    })
  }
</script>
